<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="流水记录"
             :bg="true">
    </top-bar>
    <page-content>
      <div class="st-container">
        <!-- 无数据 -->
        <div class="st-none"
             style="display:none">
          <img src="../../assets/image/mine/m_none.png"
               alt=""
               class="st-wu">
          <p class="st-data">暂无数据</p>
        </div>
        <!-- 有数据 -->
        <div class="st-tab">
          <van-tabs @change="changeExpend"
                    color='#585DF9'
                    line-width="46px"
                    title-active-color="#3D3E54"
                    title-inactive-color="#94949E">
            <van-tab name="0" title="收入">
            </van-tab>
            <van-tab name="-1" title="支出">
            </van-tab>
          </van-tabs>
          <div class="st-box">
            <van-dropdown-menu active-color='#3D3E54'>
              <van-dropdown-item @change="changeType" v-model="type" :options="typeList" />

              <van-dropdown-item title="时间"
                                  ref="item">

                <van-datetime-picker v-model="currentDate"
                                      type="date"
                                      class="date"
                                      title="选择年月日"
                                      :min-date="minDate"
                                      :max-date="maxDate"
                                      :show-toolbar='false' />

                <div class="date-btn">
                  <van-button type="info"
                              block
                              round
                              @click="onConfirm">
                    确认
                  </van-button>
                </div>
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>
          <div class="st-cont">
            <div class="st-item" v-for="(item, index) in list" :key="index">
              <div class="st-itemd">
                <p class="st-bz">{{item.currency == 1 ? 'XCH' : 'BZZ'}}</p>
                <p class="st-add" :class="{'green': expendType == -1}">{{(expendType == 0 ? '+' : '-') +item.price}}</p>
              </div>
              <div class="st-date">
                <p class="st-bz">2021-06-05 18:05:20</p>
                <p class="st-add">{{item.msg}}</p>
              </div>
            </div>
            <!-- 无数据 -->
            <page-empty v-if="!list.length"></page-empty>
          </div>
        </div>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { DropdownMenu, DropdownItem, DatetimePicker } from 'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(DatetimePicker);
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import PageEmpty from '@/components/Empty';
import service from '@/utils/request';
import moment from 'moment';

export default {
  components: {
    TopBar,
    PageView,
    PageContent,
    PageEmpty,
    DropdownItem
  },
  data () {
    return {
      expend: 0,
      expendType: 0,
      user: {},
      list: [],
      page: 1,
      total: 0,
      initLoading: true,
      type: 0,
      typeList: [
        { text: 'BZZ', value: 0 },
        { text: 'XCH', value: 1 },
      ],

      switch1: false,
      switch2: false,
      // option: [
      //   { text: '全部商品', value: 0 },
      //   { text: '新款商品', value: 1 },
      //   { text: '活动商品', value: 2 },
      // ],
      minDate: new Date(2019, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(),
    }
  },
  created () {
    this.user = this.$store.state.user;
    this.getData();
  },
  mounted () { },

  methods: {
    price(item){
      return 
    },
    changeType(type){
      this.type = type;
      this.page = 1;
      return this.getData();
    },
    getData(){
      return service.post('/apiBill.do', {
        currency: +this.type,
        page: this.page,
        limit: 50,
        date: moment(this.currentDate).format('YYYY-MM-DD'),
        isExpend: +this.expend
      }).then(res=>{
        this.initLoading = false;
        this.total = res.data.total;
        this.list = res.data.rows;
      })
    },
    //tab 点击事件
    changeExpend (name, title) {
      this.expend = name;
      this.changeType(this.type).then(e=>{
        this.expendType = this.expend;
      }, () => {
        this.expendType = this.expend;
      })
    },
    onConfirm () {
      this.$refs.item.toggle();
      this.getData();
    },

  }
}
</script>
<style lang="scss" >
.st-container {
  width: 100vw;
  overflow: hidden;
  .van-tabs__wrap {
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    .van-tab {
      width: 80px;
    }
  }
  .van-dropdown-menu__bar {
    background: #f2f1f8;
    box-shadow: 0 0px 0px #ccc;
  }
  .d-tit {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 39px;
    top: 3px;
    // padding: 0 20px;
    .p-back {
      width: 22px;
      height: 22px;
      vertical-align: middle;
      position: absolute;
      left: 20px;
    }
    .p-center {
      width: auto;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #000;
      line-height: 28px;
      margin: 0 auto;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .st-tab {
    // padding: 0 20px;
    margin-top: 70px;
    .van-tab {
      font-size: 21px;
    }
    .van-tabs__nav {
      background: #f2f1f8;
    }
    .st-box {
      height: 22px;
      line-height: 22px;
      margin: 5px 0 16px 0;
      // background: red;
      .st-all {
        display: inline-block;
        width: 50%;
        font-size: 16px;
        font-weight: 600;
        color: #3d3e54;
        .st-sj {
          // display: inline-block;
          // width: 0;
          // height: 0;
          // border: 5px solid transparent;
          // border-top: 50px solid blue;
        }
      }
    }
    .st-item {
      height: 88px;
      background: #ffffff;
      border-radius: 6px;
      padding: 0 15px;
      overflow: hidden;
      margin-top: 10px;
      .st-itemd {
        display: flex;
        justify-content: space-between;
        height: 25px;
        line-height: 25px;
        margin: 10px 0 16px 0;
        .st-bz {
          font-size: 18px;
          font-weight: 500;
          color: #3d3e54;
        }
        .st-add {
          font-size: 16px;
          font-weight: 600;
          color: #585df9;
          &.green {
            color: #00d70c;
          }
        }
      }
      .st-date {
        display: flex;
        justify-content: space-between;
        p {
          height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #94949e;
          line-height: 17px;
        }
      }
    }
  }
  .st-cont {
    margin-top: 30px;
    padding: 0 20px;
  }
  .st-none {
    margin-top: 50%;
  }
  .st-wu {
    width: 100%;
    height: 193px;
  }
  .st-data {
    height: 22px;
    font-size: 16px;
    font-weight: 600;
    color: #7a7886;
    line-height: 22px;
    text-align: center;
  }
  .date-btn{
    padding: 10px 30px;
    button{
      background-color: #585df9;
      border: 0.02667rem solid #585df9;
    }
  }
  .date{
    padding: 0 10px;
  }
}
</style>
